<template>
  <div style="width: 90%;margin: 0px auto;">
    <el-card>
      <el-form label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="手机号:" >
              <el-input placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学员姓名:" >
              <el-input placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="注册时间:">
              <el-date-picker
                  v-model="start"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">

            <el-form-item label="学校:" >
              <el-select>
                <el-option  value="0">达内山大路校区</el-option>
                <el-option value="1">达内山大路校区</el-option>
                <el-option value="2">达内山大路校区</el-option>
                <el-option value="3">达内山大路校区</el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="8">

          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button type="info">重置</el-button>
            </el-form-item>

          </el-col>
          <el-col :span="8">
            <el-button style="float: right;width: 100px" type="danger">创建账号</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
<!--    列表数据-->
    <el-card>
      <el-table :data="tableAccount">
        <el-table-column label="ID" prop="id">

        </el-table-column>
        <el-table-column label="手机号" prop="phone"></el-table-column>
        <el-table-column label="校区" prop="schoolName"></el-table-column>
        <el-table-column label="注册时间" prop="regDate"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="操作">
          <template #default>
            <el-button link type="primary" size="small" @click="showAddStudentDialog()">
              添加学员
            </el-button>
            <el-button link type="warning" size="small">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
  <el-dialog v-model="dialogFormVisible" title="添加学员" width="500">
    <el-form>
      <el-form-item label="Promotion name" >
        <el-input  autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" >
        <el-select  placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {onMounted, ref, resolveComponent} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
const dialogFormVisible = ref(false)
const start =ref('')
const loadAccount = ()=>{
   axios.get('http://localhost:8080/v1/account/list').then((response) => {
    console.log(response)
     if (response.data.code == 2000){
       tableAccount.value = response.data.data
     }else{
       ElMessage.error(response.data.msg)
     }
   })
}
const tableAccount = ref([])
 onMounted(()=>{
   loadAccount();//加载账号列表
 })
const showAddStudentDialog = ()=>{
  dialogFormVisible.value = true
}
</script>
<style scoped>

</style>
